<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/common.jspf" %>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>

</head>
<!-- 
标签：
声明控件：class="easyui-控件名"，例如：class="easyui-dialog"
控件属性：data-options="属性名:'属性值',属性名:'属性值'"，例如：data-options="iconCls:'icon-save',resizable:true
控件事件：data-options="属性名:'属性值',事件名:function(){}"，
Js:
声明控件：$(选择器).控件名({
  属性名：属性值，
   属性名：属性值，
  事件名：function(){},
   事件名：function(){}
});

如何调用控件已有的方法：
 $(选择器).控件名("方法名", "方法参数");
 $(选择器).控件名("方法名", {参数名：参数值，参数名：参数值 });
 -->
	<script type="text/javascript">
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            //创建连接,括号是服务器端地址
            websocket = new WebSocket("ws://192.168.10.109:8080/hxdc/websocket");
        }
        else {
            alert('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            alert("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            alert("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            $('#dg').datagrid("reload");
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            alert("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
        //发送消息,message是获取到页面填写的消息
        function send() {
            websocket.send(document.getElementById("msg").value);
        }

		$(function() {

            $('#dg').datagrid({
                url:"${proPath}/order/selectDetail.action",
                checkbox: true,
                fitColumns:true,

                columns:[[
                    {field:'deskId',title:'桌号',width:50},
                    {field:'orderNum',title:'订单号',width:100},
					{field:'goodName',title:'商品名字',width:50},
                    {field:'goodExitNum',title:'应做数量',width:50},
					{field:'payed',title:'付款状态',width:50},
					{field:'orderState',title:'操作',width:160, formatter:loadButton}
                ]],
				singleSelect:true,
                fitColumns:true,
                striped:true,
                rownumbers:true,
                pagination:true,
                pageSize:3,
                pageList:[3,6,9,12,15],
            });
		});

        /**
         * 切换商品状态
         * orderDetailId:订单详情id
         */
        function doChangOrderStatus(orderDetailId,itemType,prompt) {
            $.post("${proPath}/order/oper.action",
                {
                    id:orderDetailId,
					state:itemType,
                });
        }



        function loadButton(value,row,index) {
            //获取营业模式
            var button='';
                //正常模式
                if (row.orderState=='1'){
                    //未做
                    button='<button style="margin-right: 8px;height: 30px;background-color: #00b7ee;" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'2\',\'接单\')"><a style="color: #fff;text-align: center;text-decoration: none">接单</a></button >' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'3\',\'菜做好了\')"><a style="color: #fff;text-align: center;text-decoration: none">菜做好了</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'4\',\'上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">上菜</a></button>'+
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'5\',\'已上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">已上菜</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'6\',\'取消\')"><a style="color: #fff;text-align: center;text-decoration: none">取消</a></button>';

                }else if (row.orderState=='2'){
                    //做菜中
                    button='<button  style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">接单</a></button >' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'3\',\'菜做好了\')"><a style="color: #fff;text-align: center;text-decoration: none">菜做好了</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'4\',\'上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">上菜</a></button>'+
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'5\',\'已上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">已上菜</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'6\',\'取消\')"><a style="color: #fff;text-align: center;text-decoration: none">取消</a></button>';
                }else if (row.orderState=='3'){
                    //已完成做菜
                    button='<button  style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">接单</a></button >' +
                        '<button style="margin-right: 8px;height: 30px;background-color:grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">菜做好了</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'4\',\'上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">上菜</a></button>'+
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'5\',\'已上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">已上菜</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'6\',\'取消\')"><a style="color: #fff;text-align: center;text-decoration: none">取消</a></button>';
                }else if (row.orderState=='4'){
                    //上菜中
                    button='<button  style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">接单</a></button >' +
                        '<button style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">菜做好了</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">上菜</a></button>'+
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'5\',\'已上菜\')"><a style="color: #fff;text-align: center;text-decoration: none">已上菜</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: #00b7ee" onclick="doChangOrderStatus(\''+row.orderNum+'\',\'6\',\'取消\')"><a style="color: #fff;text-align: center;text-decoration: none">取消</a></button>';
                }else if (row.orderState=='5' || row.orderState=='6'){
                    //已上菜、取消
                    button='<button  style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">接单</a></button >' +
                        '<button style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">菜做好了</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">上菜</a></button>'+
                        '<button style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">已上菜</a></button>' +
                        '<button style="margin-right: 8px;height: 30px;background-color: grey;" disabled="disabled"><a style="color: #fff;text-align: center;text-decoration: none">取消</a></button>';
                }
            return button;
        }

        function search() {
            $('#dg').datagrid('load', {
                deskId: $('#deskId').val(),
                orderNum: $('#orderNum').val(),
                goodName: $('#goodName').val(),
                orderState: $('#orderState') .combobox("getValue")
            });
        }
	</script>
<body>
	<!-- 右键菜单定义如下： -->
	<form  id="ff" >
		餐桌编号:<input id="deskId" type="text" value="" name="deskId" style="width:110px">
		订单号:<input id="orderNum" type="text" value="" name="orderNum" style="width:110px">
		商品名称:<input id="goodName" type="text" value="" name="goodName" style="width:110px">
		做菜情况:
		<select class="easyui-combobox" name="orderState" id="orderState" />
		<c:forEach items="${applicationScope.sysParamMap.order_state}" var="sp">
			<option value="${sp.key}">${sp.value}</option>
		</c:forEach>
		</select>
		<input type="button" onclick="search()" value="查询">
	</form>
	<table id="dg"></table>
</body>
</html>